<template>
  <div id="contentBox">
      <div id="content" v-text="dataList.length ==0?'无查找内容':hint" v-if="!dataList.length"></div>
      <ul>
          <li v-for="item in dataList" :key="item.id">
              <textarea 
                id="sentence"
                rows="6"
                readonly="readonly"
                resize:none
                v-text="item.content"
                >
              </textarea>
                <AddTag
                    style="float:left;width:40%"
                    v-bind:content="item.content"
                    v-bind:instance="item"
                    v-bind:isTopSentance="iSentance"></AddTag>
          </li>
      </ul>
  </div>
</template>
<script>
import AddTag from './component/AddTag'
export default {
  components:{
      AddTag
  },
  data(){
      return {
          iSentance:true,
          hint:'请点击右侧标签查看对应结果'
      }
  },
//   props:['dataList'],
  created:function(){
  },
  computed:{
      dataList(){
          return this.$store.state.contentList
      }
  }
}
</script>
<style scoped>
    #contentBox{
        width: 78%;
        float: left;
        margin-right: 10px;
    }
    textarea{
        border: none
    }
    li{
        border: 1px solid #aaa;
        padding: 10px;
        height: 120px;
        margin-bottom: 2px
    }
    #sentence{
        float: left;
        width: 55%;
    }
    #sentenceTag{
        float: left;
        width:40%;
    }
    #content{
        text-align: center;
        font-size: 20px;
        padding-top: 200px
    }
</style>

